<!-- html元素的外面可以放且只能放一行代码：文档类型声明，告诉客户端浏览器，当前页面使用的是哪个版本的HTML语言 -->
<!-- document：文档  type：类型 -->
<!DOCTYPE html>
<!-- html：用于标记页面的开始和结束 -->
<!-- lang属性：指定当前页面所用的自然语言（language），可取值：en、en-us、jp、fr、zh、zh-cn、zh-hk、zh-tw... -->
<!-- 作用1：为浏览器的翻译功能指定基础语言 -->
<!-- 作用2：为盲人的屏幕阅读器确定基础发音 -->
<html lang="zh">
	<!-- head：页面的头部 -->
	<head>
		<title>头部里的标题</title>
		<!-- meta：元数据（描述数据的数据） -->
		<meta charset="UTF-8">
		<!-- head中不允许出现img元素！！ -->
		<!-- link：链接（一个外部资源文件） -->
		<!-- 属性rel：relationship，关系 -->
		<link rel="icon" href="./img/favicon.ico" />
	</head>
	<!-- body：页面的主体 -->
	<body>
		<!-- table：用于呈现批量数据的表格 -->
		<!-- 属性：border，边框的粗细 —— 注意：HTML属性值中px可以省略不写 -->
		<!-- 属性：width，整个表格的宽度 -->
		<!-- 属性：align，表格的水平对齐方式 -->
		<!-- tr：全称 table row，表格中的一行 -->
		<!-- td：全称 table datacell，表格中的一个数据单元 -->
		<!-- cellspacing：单元格间距 -->
		<table border="1" width="500" align="center" cellspacing="0">
			<!-- caption：表格标题 -->
			<caption>成绩单</caption>
			<!-- thead：表格头部 -->
			<!-- ht：table header，表格的标题中的列 -->
			<thead>
				<tr>
					<th>排名</th>
					<th>姓名</th>
					<th>成绩</th>
				</tr>
			</thead>
			<!-- tbody：表格主体 -->
			<tbody>
				<tr>
					<td>01</td>
					<td>小红</td>
					<td>99</td>
				</tr>
				<tr>
					<td>02</td>
					<td>小李</td>
					<td>89</td>
				</tr>
				<tr>
					<td>03</td>
					<td>小明</td>
					<td>88</td>
				</tr>
			</tbody>
			<!-- tfoot：表格尾部 -->
			<tfoot>
				<tr>
					<td colspan="3" align="right">排名的学生可兑换精美奖品一份</td>
				</tr>
			</tfoot>
		</table>
		<!-- hr：Horizontal Rule，水平分割线 -->
		<hr width="500">
		<!-- rowspan： 行跨越（一个单元格可以指定它跨越的行数）	-->
		<!-- colspan： 列跨越（一个单元格可以指定它跨越的列数）-->
		<!-- align：单元格中的内容的水平对齐方式，left/center/right -->
		<!-- valign：单元格中的内容的竖直(vertical)对齐方式，top/middle/bottom -->
		<table border="1" width="500" align="center">
			<tr>
				<td rowspan="2" valign="middle" align="center">11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<!-- <td>21</td> -->
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td colspan="2">31</td>
				<td>32</td>
				<!-- <td>33</td> -->
			</tr>
		</table>

		<!-- 第一种列表：有序列表 -->
		<!-- ol：Ordered List -->
		<!-- li：List Item，列表项 -->
		<!-- 属性：type，有序列表的序号类型	1/A/a/I/i-->
		<ol type="1">
			<li>小红99</li>
			<li>小李89</li>
			<li>小明88</li>
		</ol>
		<!-- 第二种列表：无序列表 -->
		<!-- ul：Unordered List -->
		<!-- 属性：type，指定无序列表项前的提示符号 -->
		<ul type="circle">
			<li>小红</li>
			<li>小李</li>
			<li>小明</li>
		</ul>
		<ul type="disc">
			<li>小红</li>
			<li>小李</li>
			<li>小明</li>
		</ul>
		<ul type="square">
			<li>小红</li>
			<li>小李</li>
			<li>小明</li>
		</ul>
		<!-- 第三种列表：定义列表 -->
		<!-- dl：Definition List定义列表 -->
		<!-- dt：Definition Type定义一个类型 -->
		<!-- dd：Definition Description定义该类型详细的描述 -->
		<dl>
			<dt>小红</dt>
			<dd>是一个美丽的女孩</dd>

			<dt>小李</dt>
			<dd>是一个聪明的男生</dd>

			<dt>小明</dt>
			<dd>是一个活泼的男孩</dd>
		</dl>

		<!-- form：表单，用于收集用户信息，并提交给服务器的一种机制 -->
			<!-- action：动作，表示下面的数据将要提交给哪个API来处理 -->
			<!-- method：方法，数据的提交给服务器的方法 -->
			<!-- input：输入框 -->
			<!-- type：输入框的类型，text表示 单行文本输入框 -->
			<!-- type：输入框的类型，submit表示 提交按钮-->
			<!-- type：输入框的类型，password表示 单行密码输入框-->
			<!-- type：输入框的类型，radio表示 单选按钮-->
			<!-- name：名称，表示将要提交给服务器的数据的名 -->
			<!-- value：值，按钮的值就是按钮上显示是文字；单选按钮的值就是选中该选项要提交的值-->
			<form action="/v1/user/register" method="get">
				用户名：<input type="text" name="yonghuming"> <br>
				密码：<input type="password" name="mima"> <br>
				性别：<input type="radio" name="sex" value="nan">男 
					<input type="radio" name="sex" value="nv">女 <br>
				<!-- textarea：文本区域，多行文本输入框 -->
				<!-- rows：显示出来的行数 -->
				<!-- cols：显示处理的列数 -->
				个人签名：<textarea name="qianming" cols="60" rows="5"></textarea><br>
				<input type="submit" value="提交我的注册信息">
			</form>
	</body>
</html>
